<template>
  <div class="Classification-articles">
    <div class="_2b0LQ_j7dN-JQtnGkqmrDz">
      <span>文章分类</span>
    </div>
    <ul>
      <li>
        <a aria-label="前端" href="/category/fe"
          ><span>前端</span><span>共计 14 篇文章</span></a
        >
      </li>
      <li>
        <a aria-label="后端" href="/category/be"
          ><span>后端</span><span>共计 4 篇文章</span></a
        >
      </li>
      <li>
        <a aria-label="阅读" href="/category/reading"
          ><span>阅读</span><span>共计 5 篇文章</span></a
        >
      </li>
      <li>
        <a aria-label="Linux" href="/category/linux"
          ><span>Linux</span><span>共计 4 篇文章</span></a
        >
      </li>
      <li>
        <a aria-label="LeetCode" href="/category/leetcode"
          ><span>LeetCode</span><span>共计 2 篇文章</span></a
        >
      </li>
      <li>
        <a aria-label="要闻" href="/category/news"
          ><span>要闻</span><span>共计 2 篇文章</span></a
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style scpoce lang="scss">
.Classification-articles {
  border-radius: var(--border-radius);
  margin-bottom: 1.3rem;
  background-color: var(--bg-second);
  box-shadow: var(--box-shadow);
  line-height: 1.29;
  overflow: hidden;
}
.Classification-articles ._2b0LQ_j7dN-JQtnGkqmrDz {
  padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--main-text-color);
  font-weight: 700;
}
.Classification-articles ul {
  padding: 1rem;
}
.Classification-articles ul li {
  padding: 8px 7px;
  border-radius: var(--border-radius);
  color: var(--second-text-color);
  line-height: 1.5em;
  transition: all 0.2s ease-in-out;
}
.Classification-articles ul li a:hover {
  span {
    color: var(--primary-color);
  }
  span {
    color: var(--primary-color);
  }
}
.Classification-articles ul li a span:nth-child(2) {
  font-size: 16px;
}
</style>
